<template>
  <div v-show="config.currentUser" class="poster-warpper" :class="{ 'pc': equ === 'pc', 'mobile': equ === 'h5' }">
    <div v-if="equ === 'h5'" class="save-tip">
      保存分享图片，发布朋友圈
    </div>
    <div v-if="!posterImage" ref="posterRef" class="poster-container">
      <img class="absolute inset-0" :src="props.sourceData?.poster_url || getPath('poster')" crossOrigin="anonymous"
        alt="">
      <div class="poster-body">
        <div class="qr-container">
          <div class="qr-content">
            <div class="qr-description"> {{ equ === 'h5' ? '长按开启魔珐之旅' : '扫码开启魔珐之旅' }}</div>
            <img class="qr" :src="sourceData.qr_url || getPath('qr')" alt="二维码">
          </div>
        </div>
        <div class="poster-content">
          <div class="content">
            <div class="content-img">
              <img class="relative w-full h-full object-cover" src="@/assets/images/poster-title.png" alt="图片"
                crossOrigin="anonymous">
            </div>
            <div class="content-description">
              <div>恭喜你成为AIGC虚拟人</div>
              <div>第<code>{{ config.currentUser.toLocaleString() }}</code>位体验官</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="poster-container">
      <img :src="posterImage" class="poster-img" alt="海报" crossOrigin="anonymous">
    </div>
    <div class="poster-download" :class="{ 'download': equ === 'pc' }" @click="handleDownload">
      {{ equ === 'h5' ? '长按保存图片' : '点击保存图片' }}
    </div>
  </div>
</template>
<script lang="ts" name="PosterBaseView" setup>
import { onMounted, ref } from 'vue';
import html2canvas from "html2canvas";
import { useConfigStore } from '@/store/config'
import { equ } from '../../../../package-env';

const getPath = (name) => {
  return new URL(`../../../assets/images/${name}.png`, import.meta.url).href
}

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  sourceData: {
    type: Object,
    default: {
      title: '魔珐科技',
      poster_url: '',
      qr_url: '',
    }
  }
})

const posterRef = ref(); // 海报容器
const posterImage = ref();
const config: any = useConfigStore();
const open = ref(false);

const generatePoster = async () => {
  try {
    const posterElement: HTMLDivElement = posterRef.value;
    const canvas = await html2canvas(posterElement, {
      height: posterElement.offsetHeight,
      width: posterElement.offsetWidth,
      backgroundColor: null,
      useCORS: true,
      allowTaint: true,
      scrollX: 0,
      scrollY: 0,
      scale: window.devicePixelRatio * 1,
    });
    const context: any = canvas.getContext("2d");
    context.mozImageSmoothingEnabled = false;
    context.webkitImageSmoothingEnabled = false;
    context.msImageSmoothingEnabled = false;
    context.imageSmoothingEnabled = false;
    posterImage.value = canvas.toDataURL("image/png");
  } catch (error) {
    console.log("run:", error)
  }
}

const handleDownload = () => {
  if (equ === 'pc' && posterImage.value) {
    const aElement = document.createElement("a");
    aElement.setAttribute("href", posterImage.value);
    aElement.setAttribute("download", "xmov-poster.png");
    aElement.click();
  }
}

const lockScroll = () => {
  document.body.classList.add('overflow-hidden')
}

const unlockScroll = () => {
  document.body.classList.remove('overflow-hidden')
}

watch(
  () => open.value,
  (value: boolean) => {
    value ? lockScroll() : unlockScroll()
  },
)

onMounted(() => {
  open.value = true;
  if (config.currentUser) {
    generatePoster();
  }
});

onUnmounted(() => {
  open.value = false;
})
</script>
<style scoped lang="scss">
.poster-download {
  @apply absolute flex justify-center items-center;
  text-align: center;
  left: 50%;
  bottom: 25px;
  transform: translateX(-50%);
  width: 88px;
  height: 14px;
  font-size: 12px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 1px;


  &.download {
    cursor: pointer;
    width: 120px;
    height: 28px;
    background: #FFFFFF;
    border-radius: 22px;
    bottom: 30px;
    color: #282828;

    &:hover {
      color: rgb(70, 115, 238);
    }
  }
}

.poster-warpper {
  position: relative;

  .poster-container {
    position: relative;
    height: 370px;
    width: 330px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: 0 auto;
    overflow: hidden;

    &.bg-img {
      background-image: url('@/assets/images/poster.png');
    }

    .poster-body {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 30px 18px;

      .qr-container {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;

        .qr-content {
          max-width: 160px;
          margin-inline-end: 15px;

          .qr-description {
            width: 100%;
            font-size: 10px;
            font-weight: 600;
            color: #263E63;
            padding-block: 10px 10px;
            margin-block-end: 5px;
          }

          .qr {
            width: 60px;
            height: 60px;
            margin: 0 auto;
          }
        }
      }

      .poster-content {
        position: relative;
        display: flex;
        justify-content: flex-end;
        padding-block: 22px;
        margin-block-start: 16px;

        .content {
          width: 51%;

          .content-title {
            width: 100%;
            font-size: 18px;
            font-weight: 700;
            color: #282828;
            letter-spacing: 1px;
            margin-top: 30px;
            margin-bottom: 5px;
          }

          .content-img {
            width: 76%;
            margin-bottom: 10px;
          }

          .content-description {
            font-size: 10px;
            font-weight: 500;
            color: #3A5277;
            text-align: left;
            letter-spacing: 1px;
            padding-inline: 0px 13px;

            code {
              color: #3A5277;
              font-size: 10px;
            }

            div {
              word-break: keep-all;
            }
          }
        }
      }
    }

    .poster-img {
      width: 100%;
      height: 100%;
      filter: drop-shadow(-2px 0px 5px rgba(0, 0, 0, 0.5));
    }
  }

  &.pc {
    .poster-container {
      width: 456px;
      height: 520px;

      .poster-body {
        padding: 30px 25px;

        .qr-container {
          margin-block: 10px;
          margin-inline-end: 15px;

          .qr-content {
            max-width: 200px;

            .qr-description {
              width: 100%;
              font-size: 13px;
              font-weight: 800;
              padding-block: 10px 20px;
            }

            .qr {
              width: 80px;
              height: 80px;
            }
          }
        }

        .poster-content {
          position: relative;
          display: flex;
          justify-content: flex-end;
          padding-block: 16px;
          padding-inline: 20px 0px;
          width: 100%;
          margin-block-start: 46px;

          .content {
            width: 53%;
            padding-inline-end: 20px;

            .content-title {
              font-size: 26px;
              margin-block: 16px 10px;
            }

            .content-description {
              letter-spacing: 2px;
              font-size: 14px;
              font-weight: 600;

              code {
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }

  &.mobile {
    width: 349px;
    height: 483px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(0px);
    margin: 0 auto;

    .save-tip {
      width: 206px;
      height: 24px;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 24px;
      margin: 0 auto;
      margin-block: 15px;
    }
  }
}

.overflow-hidden {
  overflow: hidden !important;
}
</style>
